@import "common.scss";

// 头部公共部分
.s-header{
    width: 100%;
    height: 40px;
    background-color: #de2810;
    .header-wrap{
        @include typeArea();
        height: 100%;
        // background-color: pink;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .header-l{
            width: 297px;
            height: 40px;           
            .nl-li{
                float: left;
                margin-right: 20px;
                line-height: 40px;
                a{
                    font: $font2;
                    color: $cool;
                }
            }
        }
        .nav-r{
            height: 40px;
            .nr-li{
                float: left;
                margin-left: 20px;
                line-height: 40px;
                a{
                    font: $font2;
                    color: $cool;
					padding-left:10px;
                }
            }
        }
    }
}
.navwrap{
    width: 100%;
    height: 102px;
	border-bottom: 1px solid #333;
.navwrapper{
        @include typeArea();
        height: 100%;
        // background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .navsearch-l{
            .logo{
                width: 180px;
                height: 36px;
                vertical-align: middle;
                margin-right: 40px;
            }
            a{
                font-size: 18px;
                color: #333;
                margin-right: 50px;
            }
        }
        .navsearch-r{
            .searchBar{
                width: 420px;
                height: 36px;
                border: 1px solid #ccc;
                padding: 5px 30px;
                border-radius: 18px;
                input{
                    width: 340px;
                    height: 24px;
                }
                .icon-sousuo{
                    cursor: pointer;
                }
            }
            .searchlist {
                margin-left: 20px;
                a{
                    font-size: 12px;
                color: #666;
                padding-right: 20px;
                }
            }
        }
}
}

// 内容区
.mainContent{
	background-color: #fff;
	
	.prod-intro{
			padding-top: 40px;
			@include typeArea();
			min-height: 700px;
			padding-bottom: 50px;			
			.sPic{
				.picWrap{
					float: left;
					margin-right: 80px;
					width: 482px;
					// background-color: pink;
					height: 480px;
					position: relative;
					.shadow{
						width: 200px;
						height: 200px;
						background-color: rgba(0, 0, 0, 0.5);
						position: absolute;
						display: none;
					}
					img{
						width: 100%;
						height: 100%;
					}
					.switchBar{
						width: 100%;
						height: 92px;
						display: flex;
    					margin-top: 10px;
						justify-content: space-between;
						li{
							// flex: 1;
							img{
								border: 1px solid transparent;
								border-bottom-width: 3px;
								height: 88px;
								width: 88px;
							}
						}
					}
				}
				.scaleWrap{
					// background-color: yellowgreen;
					overflow: hidden;
					min-height: 400px;
					position: relative;
					.scaleBar {
						width: 240px;
						height:240px;
						// background-color: rgba(122, 255, 255, 0.6);
						position: relative;
						/* overflow: hidden; */
						z-index: 101;
						display: none;
						.bigImg{
							position: absolute;
							/* z-index: -1; */
							width: 482px;
							height:482px;
						}
			
					}
					.sInfo{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 100;
						overflow: hidden;
						padding-top: 12px;
						// background-color: yellowgreen;
						.sInfo-name {
							font-size: 18px;
							font-weight: 400;
							line-height:24px;
							color: #333;
							margin-bottom: 10px;
						}
						.divider{
							background: #F0F0F0;
    						height: 5px;
						}
						.sInfo-price{
							height: 88px;
							background-color: #fafafa;
							padding: 0 20px 16px 15px;
							line-height: 88px;
							.sInfo-tips{
								float: left;
								font-size: 14px;
								color: #333;
								margin-right: 10px;
							}
							.sInfoPrice{
								color: #fa5437;
    							font-weight: 600;
								font-size: 24px;
							}
						}
						.wrap-input{
							height: 44px;
							padding-top: 15px;
							overflow: hidden;
							margin-bottom: 15px;
							.wrap-tips{
								width:86px;
								height: 24px;
								margin-top:4x;
								line-height: 24px;
								text-align: center;
								float: left;
								font-size: 14px;
								color: #999;
							}
							.wrapInput{
								float: left;
								text-align: center;
								height: 28px;
								
								.reduce{
									display:block;
									width: 28px;
									height: 100%;
									float: left;
									background: #fff;
									color: #ddd;
									// cursor: not-allowed;
									border: 1px solid #ddd;
								}
								.count-input{
									display: block;
									float: left;
									background: #fff;
									color: #999;
									font-family: arial;
									font-size: 14px;
									padding: 0;
									text-align: center;
									width: 40px;
									height: 28px;
									border: 1px solid #ddd;
									text-align: center;
								}
								.add{
									display: block;
									float: left;
									width: 28px;
									height: 28px;
									background-color: #f6f6f6;
									font-size: 16px;
    								line-height: 26px;
									color: #333;
									border: 1px solid #ddd;
								}
							}
						}
						.buyGoods:hover{
							cursor: pointer;
						}
						.buyGoods{
							background-color: #F63;
							border-radius: 6px;
							font-size: 20px;
							font-weight: 400;
							line-height: 38px;
							width: 200px;
							text-align: center;
							.addShoppingCar{
								color:#fff ;
							}
						}
					}
				}
			}			
	}
}

// 底部公共部分
.footer-top{
	
	min-height: 350px;
	background-color: #fff;
	color: #333;
	padding: 60px 0;
	.ftWrap{
		@include typeArea();
		.aboutbox{
			width: 320px;
			float: left;
			margin-right: 100px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			.helpText{
				font-size: 14px;
				line-height: 24px;
				margin-bottom: 6px;
				// border-bottom: 1px solid #333;
			}
		}
		.linkbox{
			float: left;
    		margin-right: 100px;
    		text-align: left;
			margin-right: 100px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			a{
				display: block;
    			font-size: 14px;
    			line-height: 24px;
				color: #666;
    			margin-bottom: 6px;
			}
		}
		.contentbox{
			border-left: 1px solid #979797;
    		float: right;
    		min-height: 230px;
    		text-align: center;
    		width: 300px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			.bigText{
				font-weight: 700;
    			font-size: 28px;
    			line-height: 30px;
			}
			.smallText{
				color: #999;
    			font-size: 14px;
    			line-height: 30px;
			}
		}
	}
}
.footer-bottom{
	background: #333;
	color: #fff;
	.fbWrap{
		@include typeArea();
		.fbtBox{
			@include typeArea();
			// margin-left: 200px;
			text-align: center;
			height: 80px;
			// border-bottom: 1px solid #666;
  			padding: 25px 0;
			  a{
				color: #fff;
				display: inline-block;
				font-size: 24px;
				line-height: 30px;
				margin-right: 150px;
				vertical-align: top;
				span{
					font: inherit;
				}
			  }
		}
		.fbBbox{
			font-size: 14px;
    		line-height: 20px;
    		padding: 18px 0 21px;
    		text-align: center;
			.fb-top{
				color: #fff;
			}
			.fb-bottom{
				color: rgba(255,255,255,.5);
				 font-size: 12px;
			}
		}
	}
}